import React, { useState } from "react";
import { Link } from "react-router-dom";
import { POST_PHONE_RESET_PASSWORD } from "../../../config/api";

import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { formValidation } from "../../../helpers/validation";
import { useRequest } from "../../../hooks/useRequest";
import { useStatusListener } from "../../../hooks/useStatusListener";
import { useSnackbar } from "notistack";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const ForgetPasswordPhone = () => {
  const [phoneNumber, setPhoneNumber] = useState("");
  const { register, handleSubmit, errors } = useForm();
  const { t } = useTranslation();
  const { fetchData, state: requestState } = useRequest();
  const { enqueueSnackbar } = useSnackbar();

  const onSubmit = (data: any) => {
    setPhoneNumber(data.countryCode.concat(data.phoneNumber));
    const finalData = {
      phoneNumber: phoneNumber,
    };
    fetchData(POST_PHONE_RESET_PASSWORD, finalData);
  };

  const onSuccess = () => {
    enqueueSnackbar(t("succeedMessage:reset-password-link"), {
      variant: "info",
      autoHideDuration: 2000,
    });
    // history.push("");
  };
  const onReject = () => {
    if (requestState.error?.message) {
      enqueueSnackbar(requestState.error?.message, {
        variant: "error",
        autoHideDuration: 2000,
      });
    }
  };
  useStatusListener(requestState.status, onSuccess, onReject);

  return (
    <>
      <div className="py-4">
        <div className="form-header text-center">
          <div className="display-4 mb-1  form-title">
            {t("form:forget-pass")}
          </div>
          <p className="font-size-lg  text-black-50 mt-2">
            {t("form:forget-phone-desc")}
          </p>
        </div>

        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="phone-inputs">
            <TextField
              name="countryCode"
              className=" my-2 country-input"
              defaultValue={"+98"}
              inputRef={register(formValidation.countryCode)}
              helperText={
                errors.countryCode?.message &&
                t(`${errors.countryCode?.message}`)
              }
              error={Boolean(errors.countryCode?.message)}
            />
            <TextField
              name="phoneNumber"
              placeholder={t("form:phone-number")}
              className="number-input my-2"
              inputRef={register(formValidation.phoneNumber)}
              helperText={
                errors.phoneNumber?.message &&
                t(`${errors.phoneNumber?.message}`)
              }
              error={Boolean(errors.phoneNumber?.message)}
            />
          </div>
          <div className="text-right cursor-pointer">
            <Link className="text-primary " to="/forgetPassword">
              {t("form:or-use-email")}
            </Link>
          </div>

          <div className="text-center py-4">
            <Button
              className="btn-primary  my-2 p-3"
              type="submit"
              style={{ width: "40%" }}
            >
              {t("buttons:send-request")}
            </Button>
          </div>
        </form>
      </div>
      <div className="form-bottom">
        <h6 className="terms">
          <span className="mr-3">{t("form:terms")}</span>
        </h6>
        <h6 className="privacy ml-4">{t("form:privacy")}</h6>
      </div>
    </>
  );
};

export default ForgetPasswordPhone;
